<template>
  <div title="图片" class="tlbr-btn hm">
    <div class="tlbr-btn__icon" @click="handleChooseImage(false)">
      <svg
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M9.08337 9.06038C8.61047 9.06038 8.22712 9.44373 8.22712 9.91663C8.22712 10.3895 8.61047 10.7729 9.08337 10.7729C9.55626 10.7729 9.93962 10.3895 9.93962 9.91663C9.93962 9.44373 9.55626 9.06038 9.08337 9.06038ZM7.02295 9.91663C7.02295 8.77868 7.94543 7.8562 9.08337 7.8562C10.2213 7.8562 11.1438 8.77868 11.1438 9.91663C11.1438 11.0545 10.2213 11.977 9.08337 11.977C7.94543 11.977 7.02295 11.0545 7.02295 9.91663Z"
          fill="currentColor"
        ></path>
        <path
          d="M12.0001 6.16467C9.90156 6.16467 8.06925 6.27142 6.77582 6.37631C5.87692 6.44921 5.18017 7.1359 5.10008 8.02675C5.00514 9.0828 4.91675 10.4755 4.91675 11.998C4.91675 13.5206 5.00514 14.9132 5.10008 15.9693C5.18017 16.8601 5.87692 17.5468 6.77582 17.6197C8.06925 17.7246 9.90156 17.8314 12.0001 17.8314C14.0988 17.8314 15.9312 17.7245 17.2247 17.6197C18.1235 17.5468 18.8201 16.8603 18.9002 15.9697C18.9951 14.9141 19.0834 13.5217 19.0834 11.998C19.0834 10.4743 18.9951 9.08194 18.9002 8.02634C18.8201 7.13571 18.1235 6.44923 17.2247 6.37634C15.9312 6.27145 14.0988 6.16467 12.0001 6.16467ZM6.67479 5.13041C7.99368 5.02346 9.86056 4.91467 12.0001 4.91467C14.1398 4.91467 16.0068 5.02347 17.3257 5.13043C18.8235 5.25191 20.0099 6.41029 20.1452 7.91441C20.2425 8.99705 20.3334 10.428 20.3334 11.998C20.3334 13.568 20.2425 14.999 20.1452 16.0816C20.0099 17.5857 18.8235 18.7441 17.3257 18.8656C16.0068 18.9725 14.1398 19.0814 12.0001 19.0814C9.86056 19.0814 7.99368 18.9725 6.67479 18.8656C5.1768 18.7441 3.99034 17.5855 3.85511 16.0812C3.75773 14.9981 3.66675 13.567 3.66675 11.998C3.66675 10.429 3.75773 8.99786 3.85511 7.91482C3.99034 6.41056 5.1768 5.25188 6.67479 5.13041Z"
          fill="currentColor"
        ></path>
        <path
          d="M15.2187 13.2943C14.877 12.9525 14.323 12.9525 13.9812 13.2942L12.2876 14.9879C11.576 15.6995 10.4221 15.6992 9.71083 14.9872C9.42926 14.7054 8.97247 14.7052 8.69073 14.987L7.44192 16.2356C7.19783 16.4796 6.80209 16.4796 6.55803 16.2355C6.31397 15.9915 6.31399 15.5957 6.55808 15.3516L7.80691 14.103C8.57698 13.333 9.82553 13.3334 10.5952 14.1038C10.8184 14.3272 11.1804 14.3273 11.4037 14.104L13.0973 12.4104C13.9272 11.5805 15.2728 11.5805 16.1027 12.4105L17.442 13.75C17.686 13.9941 17.686 14.3898 17.4419 14.6339C17.1978 14.878 16.8021 14.878 16.558 14.6338L15.2187 13.2943Z"
          fill="currentColor"
        ></path>
      </svg>
    </div>
    <svg
      width="4"
      height="4"
      viewBox="0 0 4 4"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      class="tlbr-btn__dot"
    >
      <path d="M4 0V4H0L4 0Z" fill="#222222"></path>
    </svg>
    <div class="tlbr-btn__more">
      <div class="tlbr-btn__more__tooltip">
        <ul class="bre-toolbar__optlist pic">
          <li class="bre-toolbar__optbtn">
            <div
              class="bre-toolbar__optbtn__lab"
              @click="handleChooseImage(false)"
            >
              上传图片
            </div>
          </li>
          <li class="bre-toolbar__optbtn">
            <div
              class="bre-toolbar__optbtn__lab"
              @click="handleChooseImage(true)"
            >
              上传图片并添加水印
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, inject, shallowRef, onMounted } from 'vue'

import Quill from 'quill'
const QuillEditor = inject('QuillEditor', shallowRef<Quill>())

const handleImageFileToBase64 = (fileList: FileList) => {
  const promiseList: Promise<string>[] = []
  Array.from(fileList).forEach((file) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    promiseList.push(
      new Promise((resolve, reject) => {
        reader.onload = (e) => {
          resolve(e.target?.result as string)
        }
        reader.onerror = (e) => {
          reject(e)
        }
      })
    )
  })
  return Promise.allSettled(promiseList)
}

const handleChooseImage = (mask: boolean = false) => {
  console.log('choose image')
  let input: HTMLInputElement | null = document.querySelector(
    '#read-editor-image-upload'
  )
  if (!input) input = document.createElement('input')
  input.setAttribute('id', 'read-editor-image-upload')
  input.type = 'file'
  input.accept = 'image/*'
  input.multiple = true
  input.onchange = async (e: Event) => {
    const _target = e.target as HTMLInputElement
    const fileList = _target.files
    if (!fileList?.length) return
    // 图片转为base64
    const resultList = await handleImageFileToBase64(fileList)
    const base64List = resultList
      .filter((item) => item.status === 'fulfilled')
      .map((item) => ({
        alt: 'read-normal-image',
        src: item.value,
      }))
    QuillEditor.value?.insertImages(base64List)
    // 使用uploadContents替换占位图

    // const reader = new FileReader()
    // reader.onload = (e: Event) => {
    //   console.log(e)
    // }
    // reader.readAsDataURL(file)
    input.parentElement?.removeChild(input)
  }
  input.click()
}
</script>

<style lang="scss" scoped></style>
